$(function () {
    var option = {
        tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{a} {d}%'
        },
        legend: {
            show: true,
            orient: 'vertical',
            top: '10',
            left: '10',
            icon: 'circle',
            textStyle: {
                color: '#fff',
                fontSize: '15px'
            }
        },
        color: [
            'rgb(0, 89, 170)',
            'rgb(12, 130, 199)',
            'rgb(36, 160, 212)',
            'rgb(61, 191, 225)',
            'rgb(85, 221, 238)',
            'rgb(109, 251, 251)'
        ],
        series: [{
            name: '征集类型分布',
            type: 'pie',
            radius: '60%',
            data: [{
                    value: 30,
                    name: '校园建设'
                },
                {
                    value: 20,
                    name: '健康普查'
                },
                {
                    value: 20,
                    name: '阳光厨房'
                },
                {
                    value: 20,
                    name: '社会保险'
                },
                {
                    value: 7,
                    name: '医疗保障'
                },
                {
                    value: 3,
                    name: '交通出行'
                }
            ],
            label: {
                show: false
            }
        }]
    };
    var zjBox = echarts.init(document.getElementById('zjBox'));
    zjBox.setOption(option);
    window.addEventListener('resize', function () {
        //适应div大小
        zjBox.resize();
    });

    var option1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        color: ['#00dffd', '#00dffd', '#00dffd'],
        grid: {
            left: '3%',
            right: '4%',
            top: '20',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: [
                '百官街道',
                '曹娥街道',
                '东关街道',
                '道墟街道',
                '小越街道',
                '梁湖街道',
                '崧厦街道',
                '章镇镇',
                '丰惠镇',
                '上浦镇',
                '汤浦镇',
                '永和镇',
                '驿亭镇',
                '谢塘镇',
                '盖北镇',
                '长塘镇',
                '岭南乡',
                '陈溪乡',
                '下管镇',
                '丁宅乡'
            ],
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                interval: 0,
                rotate: 45, //倾斜度 -90 至 90 默认为0
                margin: 2,
                textStyle: {
                    // fontWeight:"bolder",
                    color: '#fff',
                    fontSize: '15px'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff', //左边线的颜色
                }
            },
        }],
        yAxis: [{
            type: 'value',
            axisLabel: {
                textStyle: {
                    // fontWeight:"bolder",
                    color: '#fff',
                    fontSize: '15px'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff', //左边线的颜色
                }
            },
        }],
        series: [{
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(164, 164, 255)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(39, 40, 254)'
                        }
                    ])
                }
            },
            data: [120, 200, 40, 80, 70, 110, 130, 40, 59, 90, 43, 56, 89, 120, 250, 230, 270, 160, 170, 180]
        }]
    };
    var jyDq = echarts.init(document.getElementById('jyDq'));
    jyDq.setOption(option1);
    window.addEventListener('resize', function () {
        //适应div大小
        jyDq.resize();
    });

    var option3 = {
        tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{a} {d}%'
        },
        legend: {
            show: true,
            orient: 'vertical',
            top: '10',
            left: '10',
            icon: 'circle',
            textStyle: {
                color: '#fff',
                fontSize: '15px'
            }
        },
        color: ['rgb(12, 130, 199)', 'rgb(61, 191, 225)', 'rgb(109, 251, 251)'],
        series: [{
            name: '提出人的建议占比',
            type: 'pie',
            radius: '60%',
            data: [{
                    value: 30,
                    name: '区代表'
                },
                {
                    value: 20,
                    name: '乡镇代表'
                },
                {
                    value: 20,
                    name: '群众'
                }
            ],
            label: {
                show: false
            }
        }]
    };
    var jyzb = echarts.init(document.getElementById('jyzb'));
    jyzb.setOption(option3);
    window.addEventListener('resize', function () {
        //适应div大小
        jyzb.resize();
    });

    var option4 = {
        xAxis: {
            color: ['#00d7fd'],
            type: 'category',
            data: ['校园建设', '健康普查', '阳光厨房', '社会保险', '医疗保障', '交通出行'],
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: '15px'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff', //左边线的颜色
                }
            },
        },

        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: '15px'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff', //左边线的颜色
                }
            },
        },
        series: [{
            data: [120, 200, 40, 80, 70, 110, 130],
            type: 'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(0, 177, 254)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(0, 237, 251)'
                        }
                    ])
                }
            }
        }]
    };
    var rightBox = echarts.init(document.getElementById('right-centerBox'));
    rightBox.setOption(option4);
    window.addEventListener('resize', function () {
        //适应div大小
        rightBox.resize();
    });

    var option5 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        color: ['#00dffd', '#00dffd', '#00dffd'],
        grid: {
            left: '3%',
            right: '4%',
            top: '40',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: [
                '百官街道',
                '曹娥街道',
                '东关街道',
                '道墟街道',
                '小越街道',
                '梁湖街道',
                '崧厦街道',
                '章镇镇',
                '丰惠镇',
                '上浦镇',
                '汤浦镇',
                '永和镇',
                '驿亭镇',
                '谢塘镇',
                '盖北镇',
                '长塘镇',
                '岭南乡',
                '陈溪乡',
                '下管镇',
                '丁宅乡'
            ],
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                interval: 0,
                rotate: 45, //倾斜度 -90 至 90 默认为0
                margin: 2,
                textStyle: {
                    // fontWeight:"bolder",
                    color: '#fff',
                    fontSize: '15px'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff', //左边线的颜色
                }
            },
        }],
        yAxis: [{
            type: 'value',
            show: true,
            name: '活跃度',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: '15px'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff', //左边线的颜色
                }
            },
        }],
        series: [{
            name: '直接访问',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(88, 88, 254)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(27, 29, 255)'
                        }
                    ])
                }
            },
            barWidth: '60%',
            data: [120, 200, 40, 80, 70, 110, 130, 40, 59, 90, 43, 56, 89, 120, 250, 230, 270, 160, 170, 180]
        }]
    };
    var rightbbox = echarts.init(document.getElementById('rightbbox'));
    rightbbox.setOption(option5);
    window.addEventListener('resize', function () {
        //适应div大小
        rightbbox.resize();
    });

    // 点击事件
    $('#qunzhong').on('click', function () {
        $('.mast').show();
        $('.dialog').show();
    });

    // 取消事件
    $('.img-responsive').on('click', function () {
        $('.mast').hide();
        $('.dialog').hide();
        $('.Qudialog').hide();
        $('.Zhdialog').hide();
    });

    $('.qudaibiao').on('click', function () {
        $('.mast').show();
        $('.Qudialog').show();
    });

    $('#zjdb').on('click', function () {
        $('.mast').show();
        $('.Zhdialog').show();
    });
    $('.right-top-center').liMarquee({
        direction: 'up'
    });
});